<template>
    <div class="content">
        <div class="content-box">
            <div class="top-bar">
                <div class="item" @click="click(0)">
                    公司新闻
                </div>
                <span></span>
                <div class="item" @click="click(1)">
                    行业知识
                </div>
            </div>
            <div class="message-box">
                <div class="news-messlist list" v-for="(item, index) in newsList" :key="index" v-if="index == 0" @click="gotoXiangqing(1,item.newsid)">
                    <div class="img-box-left">
                        <img class="img" :src="base64Img(item.img)" alt="">
                    </div>
                    <div class="message-right">
                        {{ item.title }}
                    </div>
                    <div class="time">
                        {{ index + 1 }}
                    </div>
                </div>
                <div class="chanpin-messlist list "  v-for="(item, index) in chanpinList" :key="index" v-if="index == 1"  @click="gotoXiangqing(2,item.newsid)">
                    <div class="img-box-left">
                        <img class="img" :src="base64Img(item.img)" alt="">
                    </div>
                    <div class="message-right">
                        {{ item.title }}
                    </div>
                    <div class="time">
                        {{ index + 1 }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { getNewsList } from '@/api/viewapi.js'
import { base64Img } from '@/tools/tools.js'
import { ref, reactive, onMounted } from 'vue'
import router from '@/router/index.js';
const index = ref(0)
const newsList = ref([])
const chanpinList = ref([])

const _getNewsList = () => {
    getNewsList().then((res) => {
        console.log('新闻数据', res);
        newsList.value = res.data.newslist
        chanpinList.value = res.data.chanpinlist
    })
}

// 跳转详情
const gotoXiangqing = (checkid,newsid) =>{
    router.push({path:'/newsmessage',query:{
        checkid:checkid,newsid
    }})
}


const click = (i) => {
    index.value = i
}

onMounted(() => {
    _getNewsList()
});

</script>

<style lang="scss" scoped>
.content-box {
    max-width: 1400px;
    margin: 0 auto;

    .top-bar {
        display: flex;
        padding: 10px 0;
        width: 300px;
        justify-content: space-between;

        .item {
            padding: 24px;
            border: 1px solid gainsboro;
            border-radius: 10px;
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease;

        }

        span {
            margin-top: 16px;
            width: 1px;
            height: 40px;
            background-color: gainsboro;
        }

        .item:hover {
            background-color: #00a0e9;
            color: white;
            border: 1px solid rgb(255, 255, 255);

        }
    }

    .message-box {
        margin-top: 40px;

        .list {
            display: flex;
            margin: 20px 0;
            background-color: #ebf3f7;
            justify-content: space-between;
            transition: 0.3s;
            cursor: pointer;

            .img-box-left {
                width: 340px;
                background-color: #e2f6ff;
                display: flex;
                justify-content: center;

                .img {
                    width: 340px;
                }
            }

            .message-right {
                width: 900px;
                line-height: 264px;
                font-size: 24px;
                font-weight: 800;
            }

            .time {
                line-height: 264px;
                font-size: 24px;
                font-weight: 800;
                padding-right: 80px;
            }
        }

        .list:hover {
            background-color: #ffffff;
            box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.2);
            color: #00a0e9;
            transform: scale(1.04);

            
        }
    }
}
</style>